#{extends '/temp/main.html'/}
<script type="text/javascript">
    wx.ready(function () {
        wx.error(function(res){
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            $.alert(JSON.stringify(res));
        });
    })
</script>
<div class="page-group home">
    <div class="page">
        <header class="bar bar-nav">
            <!--<a href="javascript:history.go(-1);" class="icon icon-left pull-left"></a>-->
            <h1 class="title">任务记录</h1>
        </header>
        <section class="helper_index content scroll_y" style="padding-bottom:2rem;">
        *{<div class="h_notice">}*
        *{<p><i class="iconfont">&#xe612;</i><span>XX店下单168元，提成20元</span></p>}*
        *{</div>}*
            <div class="list-block">
                <form name="form1" method="post" action="">
                    <ul>
                        <!-- Text inputs -->
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">商户</div>
                                    <div class="item-input">
                                        <input type="text" value="${taskRecord?.defaultAddress?.userName}" readonly
                                               placeholder="">
                                    </div>
                                    <div class="item-after">
                                        <em>${taskRecord?.remark}</em>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title label">签到</div>
                                <div class="item-input">
                                    <audio preload="metadata" controls="controls" hidden class="musicBox"></audio>
                                    <span id="ip_sign_voice" class="button button-fill audioBtn"
                                          voice_src="${taskRecord?.signVoice}" name="signVoice">
                                        <img id="ip_sign_voice_png" src="/public/images/ico_voice_l.png"/>
                                        <img id="ip_sign_voice_gif" src="/public/images/ico_voice_play.gif" style="display: none;"/>
                                        <em id="ip_sign_voice_em">${taskRecord?.signAt?.format('yyyy-MM-dd HH:mm:ss')}</em></span>
                                </div>
                                <div class="item-after start_record"  span_id="ip_sign_voice" em_id="ip_sign_voice_em" voice_name="signVoice" style="display:block"><em class="gray">开始录音</em></div>
                                <div class="item-after end_record"  span_id="ip_sign_voice" em_id="ip_sign_voice_em" voice_name="signVoice" style="display: none"><em class="gray">停止录音</em></div>
                            </div>
                        </li>
                        <li class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title label">目的</div>
                                <div class="item-input">
                                    <audio preload="metadata" controls="controls" hidden class="musicBox"></audio>
                                    <span id="ip_target_voice" class="button button-fill audioBtn" voice_src="${taskRecord?.targetVoice}"
                                          name="targetVoice">
                                        <img src="/public/images/ico_voice_l.png"/>
                                        <img src="/public/images/ico_voice_play.gif" style="display: none;"/>
                                        <em id="ip_target_voice_em" >${taskRecord?.recordTargetAt?.format('yyyy-MM-dd HH:mm:ss')}</em></span>
                                </div>
                                *{<div class="item-after"><em class="gray">添加</em></div>}*
                                <div class="item-after start_record"  span_id="ip_target_voice" em_id="ip_target_voice_em" voice_name="targetVoice" style="display:block"><em class="gray">开始录音</em></div>
                                <div class="item-after end_record"  span_id="ip_target_voice" em_id="ip_target_voice_em" voice_name="targetVoice" style="display: none"><em class="gray">停止录音</em></div>

                            </div>
                        </li>
                        <li class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title label">状态</div>
                                <div class="item-input">
                                </div>
                                <div class="item-after">
                                    <em class="gray">&{'visitStatus.'+taskRecord?.visitStatus}</em>
                                </div>
                            </div>
                        </li>
                        <li class="item-content item-link">
                            <div class="item-inner">
                                <div class="item-title label">问题</div>
                                <div class="item-input">
                                    <audio preload="metadata" controls="controls" hidden class="musicBox"></audio>
                                    <span id="ip_problem_voice" class="button button-fill audioBtn" voice_src="${taskRecord?.targetVoice}"
                                          name="targetVoice">
                                        <img src="/public/images/ico_voice_l.png"/>
                                        <img src="/public/images/ico_voice_play.gif" style="display: none;"/>
                                        <em id="ip_problem_voice_em" >${taskRecord?.recordTargetAt?.format('yyyy-MM-dd HH:mm:ss')}</em></span>
                                </div>
                            *{<div class="item-after"><em class="gray">添加</em></div>}*
                                <div class="item-after start_record"  span_id="ip_problem_voice" em_id="ip_problem_voice_em" voice_name="problemVoice" style="display:block"><em class="gray">开始录音</em></div>
                                <div class="item-after end_record"  span_id="ip_problem_voice" em_id="ip_problem_voice_em" voice_name="problemVoice" style="display: none"><em class="gray">停止录音</em></div>

                            </div>
                        </li>
                        <li class="item-content item-link">
                            <div class="item-inner">
                                <div class="item-title label">分析</div>
                                <div class="item-input">
                                    <audio preload="metadata" controls="controls" hidden class="musicBox"></audio>
                                    <span id="ip_analysis_voice" class="button button-fill audioBtn" voice_src="${taskRecord?.targetVoice}"
                                          name="targetVoice">
                                        <img src="/public/images/ico_voice_l.png"/>
                                        <img src="/public/images/ico_voice_play.gif" style="display: none;"/>
                                        <em id="ip_analysis_voice_em" >${taskRecord?.recordTargetAt?.format('yyyy-MM-dd HH:mm:ss')}</em></span>
                                </div>
                                <div class="item-after start_record"  span_id="ip_analysis_voice" em_id="ip_analysis_voice_em" voice_name="analysisVoice" style="display:block"><em class="gray">开始录音</em></div>
                                <div class="item-after end_record"  span_id="ip_analysis_voice" em_id="ip_analysis_voice_em" voice_name="analysisVoice" style="display: none"><em class="gray">停止录音</em></div>

                            </div>
                        </li>


                    </ul>

                </form>
            </div>

        </section>
    #{include '/temp/bottom.html'/}
    </div>
</div>
<script type="text/javascript">
    var voice = {
        localId: [],
        serverId: [],
        latitude: 0 ,
        longitude: 0 ,
        voiceContent: ''
    };
    $(function () {
        $.init();
        //开始录音接口
        $(document).on('click', '.start_record', function () {
            var end_record_div = $(this).next();
            $(this).css('display','none'); //隐藏开始录音按钮
            end_record_div.css('display','block'); //显示停止录音按钮

            var span_id =$(this).attr('span_id');
            var em_id =$(this).attr('em_id');
            var currImgs = $('#'+span_id).find("img")
            $(currImgs[0]).css('display', 'none');
            $(currImgs[1]).css('display', 'block');
            $('#'+em_id).html('录音中...');
            console.log(span_id);
            console.log(em_id);
            wx.startRecord({
                cancel: function () {
                    // $("#stopSoundRecording").attr({"disabled":"disabled"});
                },
                fail: function (res) {
                    layer.open({content: JSON.stringify(res),time: 10});
                }
            });
        });

        //停止录音接口
        $(document).on('click','.end_record',function () {
            var start_record_div = $(this).prev();

            var voice_name = $(this).attr('voice_name');
            start_record_div.css('display','block'); //显示开始录音按钮
            $(this).css('display','none'); //隐藏停止录音按钮

            var span_id =$(this).attr('span_id');
            var em_id =$(this).attr('em_id');
            var currImgs = $('#'+span_id).find("img")
            $(currImgs[0]).css('display', 'block');
            $(currImgs[1]).css('display', 'none');
            $('#'+em_id).html('');
            console.log(span_id);
            console.log(em_id);

            wx.stopRecord({
                success: function (res) {
                    voice.localId = res.localId;
                    getLocation(); //获取坐标位置
                    uploadVoice(res.localId);
                    translateVoice(res.localId) ;//语音转换文本

                    $.getJSON('/task/voice/save'
                            ,{id: '${id}'
                                ,paramName: voice_name
                                ,voiceServerId: voice.serverId
                                ,voiceContent: voice.voiceContent
                                ,latitude:voice.latitude
                                ,longitude:voice.longitude  }
                            ,function (data) {

                                if(data.success){
                                    window.location.reload();
                                }else {
                                    $.alert(data.msg);
                                }

                            })

                },
                fail: function (res) {
                    layer.open({content: JSON.stringify(res),time: 10});
                }
            });
        })


    });

    $(".audioBtn").on("click", function () {
        var audio = $(this).prev()[0];
        var voice_src = $(this).attr('voice_src');
        if(voice_src == null || voice_src == '' || voice_src == undefined) return ;
        if (!audio.src) {
            audio.src = voice_src;
            // audio.src = 'http://hao.haolingsheng.com/ring/000/994/04f85e284775a29e9bfa6d90f100a1ed.mp3';
        }
        if (audio.paused) {
            var audios = $(".musicBox");
            for (var i = 0; i < audios.length; i++) {
                var au = audios[i];
                au.pause();
                var imgs = $(au).next().find("img");
                $(imgs[0]).css('display', 'block')
                $(imgs[1]).css('display', 'none')
            }
            audio.currentTime = 0;
            audio.play();
            var currImgs = $(this).find("img")
            $(currImgs[0]).css('display', 'none')
            $(currImgs[1]).css('display', 'block')
        } else {
            audio.pause();
            $(this).find("img").toggle();
        }
    });



    //获取地标信息
    function getLocation() {
        wx.getLocation({
            type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function (res) {
                voice.latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                voice.longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                // var speed = res.speed; // 速度，以米/每秒计
                // var accuracy = res.accuracy; // 位置精度
            }
        });

    }

    //语音转换为文本
    function translateVoice( voiceId) {
        wx.translateVoice({
            localId: voiceId, // 需要识别的音频的本地Id，由录音相关接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function (res) {
                // 语音识别的结果
                voice.voiceContent = res.translateResult ;
            }
        });
    }

    //上传语音
    function uploadVoice(voiceId) {
        wx.uploadVoice({
            localId: voiceId, // 需要上传的音频的本地ID，由stopRecord接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function (res) {
                voice.serverId = res.serverId; // 返回音频的服务器端ID
            }
        });
    }


</script>

